<template>
    <yh-dialog
        title="关注列表"
        width="550px"
        :visible.sync="visibleFollow"
        v-if="visibleFollow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="handleClose"
        destroy-on-close
        drag
    >
        <el-row class="main-content" v-loading="transLoading">
            <el-col :span="24" class="followed">
                <div class="follow-search">
                    <div class="div-inline">
                        搜索:
                        <el-select
                            v-model="filterFocus"
                            remote
                            :remote-method="getBondCodeList"
                            @visible-change="handleBondCodeVisibleChange"
                            @clear="getBondCodeList('')"
                            placeholder="请选择"
                            filterable
                            clearable
                            size="mini"
                            :loading="selectLoading"
                            value-key="dictKey"
                        >
                            <el-option
                                v-for="item in bondCodeSelectData"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="div-inline date-type-box">
                        <el-select placeholder="请选择" size="mini" v-model="dateType" @change="filterFocusText">
                            <el-option v-for="itme in dateTypes" :key="itme.value" :label="itme.label" :value="itme.value"></el-option>
                        </el-select>
                    </div>
                    <div class="div-inline" style="float:right;line-height:27px">
                        <el-button type="text" @click="quickFocus">快速关注</el-button>
                    </div>
                </div>
                <div class="follow-tree">
                    <vue-easy-tree
                        ref="fedTree"
                        :data="bondsInFocus"
                        :default-checked-keys="defaultChecked"
                        :filter-node-method="filterFocusNodes"
                        show-checkbox
                        highlight-current
                        node-key="dictCode"
                        :default-expanded-keys="expandedListR"
                        height="300px"
                        :key="focusKey"
                        v-loading="focusLoading"
                        @node-expand="nodeExpandR"
                        @node-collapse="nodeCollapseR"
                    >
                        <span class="custom-tree-node" slot-scope="{ node }">
                            <!-- 一级节点 -->
                            <span v-if="node.level === 1">
                                {{ node.data.label }}
                                <span style="color:#409eff;margin-left:6px">({{ focusCount['1'] + focusCount['2'] + focusCount['3'] }})</span>
                            </span>
                            <span v-else-if="node.level === 2">
                                {{ node.data.label }}
                                <span style="color:#409eff;margin-left:6px">({{ focusCount[node.data.type] }})</span>
                            </span>
                            <span v-else>{{ node.data.label }}</span>
                        </span>
                    </vue-easy-tree>
                </div>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleClose"> 取 消 </el-button>
            <el-button size="mini" type="primary" @click="handleFocus" :loading="confirmLoading"> 确 定 </el-button>
        </div>
    </yh-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import VueEasyTree from '@wchbrad/vue-easy-tree';
import { arrayToTree, treeToArray } from '@/utils/tools';
import XEUtils from 'xe-utils';

@Component({
    name: 'QuickAttention',
    components: {
        VueEasyTree,
    },
})
export default class QuickAttention extends Vue {
    @Prop({ default: false }) readonly visible!: boolean;

    visibleFollow: boolean = false; // 快速关注弹窗
    selectLoading: boolean = false;
    checkUnFocusNodesAll: any[] = []; // 勾选的所有节点(包括父节点)
    checkFocusNodesAll: any[] = []; //
    focusStockSelect = []; // 已关注下拉搜索
    notFocusStockSelect = []; // 未关注下拉搜索
    bondsInFocus = []; // 已关注债券
    unfocusedBonds = []; // 未关注债券
    followedNumber: number = 0; // 已关注数量
    unFollowedNumber: number = 0; // 为关注数量
    filterUnFocus = ''; // 搜索未关注债券
    filterFocus = ''; // 搜索已关注
    checkUnFocusNodes = []; // 选择为关注债券(不包括父节点)
    checkFocusNodes = []; // 选择已关注债券
    checkedToFollowed = false; // 未关注-全选
    checkedToUnFollowed = false; // 已关注-全选
    confirmLoading: boolean = false; // 批量确认按钮loading
    appendState: boolean = true; // 添加关注是否禁用
    deleteState: boolean = true; // 取消关注是否禁用
    defaultChecked: any[] = [];
    unfocusKey: number = -1;
    focusKey: number = -1;
    unFocusLoading: boolean = false;
    focusLoading: boolean = false;
    transLoading: boolean = false;

    private expandedListL: string[] = ['1']; // 树展开的节点
    private expandedListR: string[] = ['1']; // 树展开的节点

    private dateTypes: any[] = [
        { label: '按债券投标', value: '1' },
        { label: '按债券缴款', value: '2' },
        { label: '按债券上市', value: '3' },
    ];

    private dateType: string = '1';

    private bondCodeSelectData: any[] = []; // 债券代码下拉框

    private bondsInFocusArr: any[] = []; // 已关注 一维数组

    private isFocus: boolean = false; // 选择的证券是否已关注
    // private currentStock: any = {}; // 当前选中证券

    // 未关注数目
    UnFocusCount = {
        '1': 0,
        '2': 0,
        '3': 0,
    };
    // 已关注数目
    focusCount = {
        '1': 0,
        '2': 0,
        '3': 0,
    };
    // 监听快速关注弹窗
    @Watch('visible')
    onWatchVisible(value: boolean) {
        this.visibleFollow = value;
    }

    @Watch('visibleFollow')
    onWatchVisibleFollow(value: boolean) {
        if (value !== this.visible) {
            this.$emit('update:visible', value);
        }
    }
    // 监听未关注的查询值
    @Watch('filterUnFocus', { immediate: true, deep: true })
    async filterUnFocusText() {
        // this.$nextTick(() => {
        this.UnFocusCount = { '1': 0, '2': 0, '3': 0 };
        this.$refs.tree && (this.$refs.tree as any).filter(this.filterUnFocus);
        this.$refs.tree && this.handleCheckUnFocus();
        // });
    }
    // 监听已关注的查询值
    @Watch('filterFocus', { immediate: true, deep: true })
    async filterFocusText() {
        let res = this.bondsInFocusArr.find(item => item.key === this.dateType + '-' + (this.filterFocus as any).dictKey);

        if (!res) {
            this.isFocus = false;
            return;
        }

        this.$nextTick(() => {
            let nodesMap = this.$refs.fedTree.store.nodesMap;
            for (let key in nodesMap) {
                // 全部关闭
                nodesMap[key].expanded = false;
                nodesMap[key].isCurrent = false;
            }
            this.isFocus = true;
            this.expandedListR = ['1', res.dictCode];

            (this.$refs.fedTree as any).setCurrentKey(res.dictCode);
        });
    }

    // 监听添加关注按钮状态
    @Watch('checkUnFocusNodes', { immediate: true, deep: true })
    async handleAppendState() {
        if (this.checkUnFocusNodes.length === 0) {
            this.appendState = true;
        } else {
            this.appendState = false;
        }
    }
    // 监听取消关注按钮状态
    @Watch('checkFocusNodes', { immediate: true, deep: true })
    async handleDeleteState() {
        if (this.checkFocusNodes.length === 0) {
            this.deleteState = true;
        } else {
            this.deleteState = false;
        }
    }

    // 获取债券代码下拉框数据
    getBondCodeList(e: string) {
        this.selectLoading = true;
        this.$axios
            .post('/stockCalendar/stock/select', {
                dictKey: e,
                dictKeyName: e,
            })
            .then((res: any) => {
                this.bondCodeSelectData = res || [];
                this.selectLoading = false;
            })
            .catch(() => {
                this.selectLoading = false;
            });
    }

    handleBondCodeVisibleChange(val: boolean) {
        if (val && !this.bondCodeSelectData.length) {
            this.getBondCodeList('');
        }
    }
    // 获取未关注债券信息
    async queryNotFocusStock() {
        try {
            this.unFocusLoading = true;
            let result = (await this.$axios.post('/stockCalendar/getNotFocusStock', { stockCode: '' })) as any;
            this.transListDataToTreeData(result, 'unFollowed');
            // this.unFollowedNumber = this.getFollowedNumber(this.unfocusedBonds);
            this.unFocusLoading = false;
        } catch (err) {
            this.unFocusLoading = false;
        }
    }

    // 获取当前用户关注债券信息
    async queryFocusStocks() {
        try {
            this.focusLoading = true;
            let result = (await this.$axios.post('/stockCalendar/getFocusStocks', { stockCode: '' })) as any;
            this.transListDataToTreeData(result, 'followed');
            // this.followedNumber = this.getFollowedNumber(this.bondsInFocus);
            this.focusLoading = false;
        } catch (err) {
            this.focusLoading = false;
        }
    }

    // 数据格式转换
    transListDataToTreeData(data, type) {
        let arr = [];
        if (data.length > 0) {
            arr.push({
                dictCode: '1',
                key: '1',
                label: '所有',
                children: [],
            });
        }
        data.forEach(item => {
            if (item.type === '1') {
                arr[0].children.push({
                    type: '1',
                    dictCode: '1-1',
                    key: '1-1',
                    label: '债券投标',
                    children: this.changeKeyName(item.stockInfos, item.type),
                });
                this.handleCount(type, item.type, item.stockInfos);
            }
            if (item.type === '2') {
                arr[0].children.push({
                    type: '2',
                    dictCode: '2-1',
                    key: '2-1',
                    label: '债券缴款',
                    children: this.changeKeyName(item.stockInfos, item.type),
                });
                this.handleCount(type, item.type, item.stockInfos);
            }
            if (item.type === '3') {
                arr[0].children.push({
                    type: '3',
                    dictCode: '3-1',
                    key: '3-1',
                    label: '债券上市',
                    children: this.changeKeyName(item.stockInfos, item.type),
                });
                this.handleCount(type, item.type, item.stockInfos);
            }
        });
        if (type === 'followed') {
            this.bondsInFocus = arr;
            this.bondsInFocusArr = treeToArray(this.bondsInFocus);
        } else if (type === 'unFollowed') {
            this.unfocusedBonds = arr;
        }
        // 默认全选
        this.$nextTick(() => {
            (this.$refs.fedTree as any).setCheckedNodes(this.bondsInFocus);
        });
    }

    handleCount(type, key, stockInfos) {
        if (type == 'unFollowed') {
            this.UnFocusCount[key] = stockInfos.length || 0;
        } else {
            this.focusCount[key] = stockInfos.length || 0;
        }
    }

    private nodeExpandL(data: any): void {
        // 在节点展开是添加到默认展开数组left
        this.expandedListL.push(data.dictCode);
    }

    private nodeCollapseL(data: any): void {
        // 收起时删除数组里对应选项left
        this.expandedListL.splice(this.expandedListL.indexOf(data.dictCode), 1);
    }

    private nodeExpandR(data: any): void {
        // 在节点展开是添加到默认展开数组right
        this.expandedListR.push(data.dictCode);
    }

    private nodeCollapseR(data: any): void {
        // 收起时删除数组里对应选项right
        this.expandedListR.splice(this.expandedListR.indexOf(data.dictCode), 1);
    }

    // 改变对象key名
    changeKeyName(data, type) {
        let _data = data.map(item => {
            item.type = type;
            item.label = item.dictKeyName;
            item.key = item.dictCode;
            return item;
        });
        return _data;
    }

    // 搜索未关注信息
    getNotFocusStockSelect(val) {
        this.selectLoading = true;
        this.$axios
            .post('/stockCalendar/getNotFocusStockSelect', { stockCode: val })
            .then((res: any) => {
                this.notFocusStockSelect = res;
                this.selectLoading = false;
            })
            .catch(() => {
                this.selectLoading = false;
            });
    }

    handleNotFocusVisibleChange(val: boolean) {
        if (val && !this.notFocusStockSelect.length) {
            this.getNotFocusStockSelect('');
        }
    }

    // 过滤未关注数据
    filterUnFocusNodes(value, data) {
        let ret = true;
        if (value) {
            ret = data.label.indexOf(value) !== -1;
        }

        ret && !['债券投标', '债券缴款', '债券上市'].includes(data.label) && this.UnFocusCount[data.type]++;

        return ret;
    }

    // 选择未关注债券
    handleCheckUnFocus() {
        this.checkUnFocusNodesAll = (this.$refs.tree as any).getCheckedNodes();

        this.checkUnFocusNodes = this.checkUnFocusNodesAll
            .filter(item => !['所有', '债券投标', '债券缴款', '债券上市'].includes(item.label))
            .filter(item => item.dictKey == this.filterUnFocus || !this.filterUnFocus);
    }

    // 添加关注
    handleAppend() {
        this.transLoading = true;
        this.appendNodeInTree(this.bondsInFocus, this.checkUnFocusNodes);
        if (!this.filterUnFocus) {
            if (this.checkUnFocusNodesAll.findIndex(item => item.dictCode == '1') != -1) {
                this.unfocusedBonds = [];
                this.checkUnFocusNodes = [];
            } else {
                if (this.checkUnFocusNodesAll.findIndex(item => item.dictCode == '1-1') != -1) {
                    let index = this.unfocusedBonds[0].children.findIndex(item => item.dictCode == '1-1');
                    this.unfocusedBonds[0].children.splice(index, 1);
                    this.checkUnFocusNodes = this.checkUnFocusNodes.filter(item => item.type != '1');
                }
                if (this.checkUnFocusNodesAll.findIndex(item => item.dictCode == '2-1') != -1) {
                    let index = this.unfocusedBonds[0].children.findIndex(item => item.dictCode == '2-1');
                    this.unfocusedBonds[0].children.splice(index, 1);
                    this.checkUnFocusNodes = this.checkUnFocusNodes.filter(item => item.type != '2');
                }
                if (this.checkUnFocusNodesAll.findIndex(item => item.dictCode == '3-1') != -1) {
                    let index = this.unfocusedBonds[0].children.findIndex(item => item.dictCode == '3-1');
                    this.unfocusedBonds[0].children.splice(index, 1);
                    this.checkUnFocusNodes = this.checkUnFocusNodes.filter(item => item.type != '3');
                }
            }
        }
        this.checkUnFocusNodes.map(item => {
            this.removeNodeInTree(this.unfocusedBonds, item.dictCode);
        });

        this.checkUnFocusNodes = [];
        // (this.$refs.tree as any).setCheckedKeys([]);
        this.unfocusKey++;
        // this.followedNumber = this.getFollowedNumber(this.bondsInFocus);
        // this.unFollowedNumber = this.getFollowedNumber(this.unfocusedBonds);
        this.$nextTick(() => {
            this.filterUnFocusText();
            this.filterFocusText();
        });
        this.transLoading = false;
    }

    // 取消关注
    handleDelete() {
        this.transLoading = true;
        this.appendNodeInTree(this.unfocusedBonds, this.checkFocusNodes);
        if (!this.filterFocus) {
            if (this.checkFocusNodesAll.findIndex(item => item.dictCode == '1') != -1) {
                this.bondsInFocus = [];
                this.bondsInFocusArr = [];
                this.checkFocusNodes = [];
            } else {
                if (this.checkFocusNodesAll.findIndex(item => item.dictCode == '1-1') != -1) {
                    let index = this.bondsInFocus[0].children.findIndex(item => item.dictCode == '1-1');
                    this.bondsInFocus[0].children.splice(index, 1);
                    this.checkFocusNodes = this.checkFocusNodes.filter(item => item.type != '1');
                }
                if (this.checkFocusNodesAll.findIndex(item => item.dictCode == '2-1') != -1) {
                    let index = this.bondsInFocus[0].children.findIndex(item => item.dictCode == '2-1');
                    this.bondsInFocus[0].children.splice(index, 1);
                    this.checkFocusNodes = this.checkFocusNodes.filter(item => item.type != '2');
                }
                if (this.checkFocusNodesAll.findIndex(item => item.dictCode == '3-1') != -1) {
                    let index = this.bondsInFocus[0].children.findIndex(item => item.dictCode == '3-1');
                    this.bondsInFocus[0].children.splice(index, 1);
                    this.checkFocusNodes = this.checkFocusNodes.filter(item => item.type != '3');
                }
                this.bondsInFocusArr = treeToArray(this.bondsInFocus);
            }
        }
        this.checkFocusNodes.map(item => {
            this.removeNodeInTree(this.bondsInFocus, item.dictCode);
        });
        this.checkFocusNodes = [];
        // (this.$refs.fedTree as any).setCheckedKeys([]);
        this.focusKey++;
        // this.followedNumber = this.getFollowedNumber(this.bondsInFocus);
        // this.unFollowedNumber = this.getFollowedNumber(this.unfocusedBonds);
        this.$nextTick(() => {
            this.filterUnFocusText();
            this.filterFocusText();
        });
        this.transLoading = false;
    }
    // 搜索已关注信息
    getFocusStockSelect(val) {
        this.selectLoading = true;
        this.$axios
            .post('/stockCalendar/getFocusStockSelect', { stockCode: val })
            .then((res: any) => {
                this.focusStockSelect = res;
                this.selectLoading = false;
            })
            .catch(() => {
                this.selectLoading = false;
            });
    }

    handleFocusVisibleChange(val: boolean) {
        if (val && !this.focusStockSelect.length) {
            this.getFocusStockSelect('');
        }
    }

    // 过滤已关注数据
    filterFocusNodes(value, data) {
        let ret = true;
        if (value) {
            ret = data.label.indexOf(value) !== -1;
        }

        ret && !['债券投标', '债券缴款', '债券上市'].includes(data.label) && this.focusCount[data.type]++;

        ret = data.key.indexOf(this.dateType + '-' + value) !== -1;

        return ret;
    }

    // 选择已关注债券
    handleCheckFocus() {
        this.checkFocusNodesAll = (this.$refs.fedTree as any).getCheckedNodes();
        this.checkFocusNodes = this.checkFocusNodesAll
            .filter(item => !['所有', '债券投标', '债券缴款', '债券上市'].includes(item.label))
            .filter(item => item.dictKey == this.filterFocus.dictKey || !this.filterFocus.dictKey);
    }

    // 确认
    async handleFocus() {
        let params = [];
        params = this.packageTreeData((this.$refs.fedTree as any).getCheckedNodes());
        // if (this.bondsInFocus[0]) {
        //     params = this.translateData(this.bondsInFocus[0]);
        // }
        this.confirmLoading = true;
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/stockCalendar/focusStocks', params)
                .then((res: any) => {
                    (this.$parent as any).getStockCalendar();
                    this.$emit('viewDayDetail', '');
                    resolve(res);
                    this.visibleFollow = false;
                    this.confirmLoading = false;
                    this.filterUnFocus = '';
                    this.filterFocus = '';

                    this.focusKey++;
                    this.unfocusKey++;
                })
                .catch(err => {
                    reject(err);
                })
                .finally(() => {
                    this.visibleFollow = false;
                    this.confirmLoading = false;
                });
        });
    }
    // 关闭快速关注弹窗
    handleClose() {
        this.filterUnFocus = '';
        this.filterFocus = '';
        this.visibleFollow = false;
    }

    // 很傻逼的一个自定义树形数组新增方法，请见谅
    appendNodeInTree(data, checkNodes) {
        let bid = [];
        let payIn = [];
        let ipo = [];
        console.time('data耗时:');
        checkNodes.map(item => {
            if (data.length == 0) {
                data.push({
                    dictCode: '1',
                    key: '1',
                    label: '所有',
                    children: [],
                });
            }
            if (item.type === '1') {
                bid.push(item);
                this.focusCount[item.type]++;
            }
            if (item.type === '2') {
                payIn.push(item);
                this.focusCount[item.type]++;
            }
            if (item.type === '3') {
                ipo.push(item);
                this.focusCount[item.type]++;
            }
        });
        // 没有债券投标就新增
        if (checkNodes.some(i => i.type === '1') && data[0].children.length === 0) {
            data[0].children.push({
                type: '1',
                dictCode: '1-1',
                key: '1-1',
                label: '债券投标',
                children: bid,
            });
        } else if (checkNodes.some(i => i.type === '1') && data[0].children.length > 0 && data[0].children.some(value => value.dictCode === '1-1')) {
            // 有值，并且有债券投标就往里加
            let index = data[0].children.findIndex(value => value.dictCode === '1-1');
            data[0].children[index].children.push(...bid);
        } else if (
            checkNodes.some(i => i.type === '1') &&
            data[0].children.length > 0 &&
            data[0].children.findIndex(value => value.dictCode === '1-1') === -1
        ) {
            // 有值，但是没有债券投标就加到头部
            data[0].children.unshift({
                type: '1',
                dictCode: '1-1',
                key: '1-1',
                label: '债券投标',
                children: bid,
            });
        }

        if (checkNodes.some(i => i.type === '2') && data[0].children.length === 1) {
            data[0].children.push({
                type: '2',
                dictCode: '2-1',
                key: '2-1',
                label: '债券缴款',
                children: payIn,
            });
        } else if (checkNodes.some(i => i.type === '2') && data[0].children.length > 0 && data[0].children.some(value => value.dictCode === '2-1')) {
            let index = data[0].children.findIndex(value => value.dictCode === '2-1');
            data[0].children[index].children.push(...payIn);
        } else if (
            checkNodes.some(i => i.type === '2') &&
            data[0].children.length > 0 &&
            data[0].children.findIndex(value => value.dictCode === '2-1') === -1
        ) {
            data[0].children.splice(1, 0, {
                type: '2',
                dictCode: '2-1',
                key: '2-1',
                label: '债券缴款',
                children: payIn,
            });
        }

        if (checkNodes.some(i => i.type === '3') && data[0].children.length < 1) {
            data[0].children.push({
                type: '3',
                dictCode: '3-1',
                key: '3-1',
                label: '债券上市',
                children: ipo,
            });
        } else if (checkNodes.some(i => i.type === '3') && data[0].children.length > 0 && data[0].children.some(value => value.dictCode === '3-1')) {
            let index = data[0].children.findIndex(value => value.dictCode === '3-1');
            data[0].children[index].children.push(...ipo);
        } else if (
            checkNodes.some(i => i.type === '3') &&
            data[0].children.length > 0 &&
            data[0].children.findIndex(value => value.dictCode === '3-1') === -1
        ) {
            data[0].children.push({
                type: '3',
                dictCode: '3-1',
                key: '3-1',
                label: '债券上市',
                children: ipo,
            });
        }
        this.bondsInFocusArr = treeToArray(data);
        console.time('data耗时:');
    }

    // 删除树形数组
    removeNodeInTree(treeList, dictCode) {
        // 通过dictCode从数组（树结构）中移除元素
        if (!treeList || !treeList.length) {
            return;
        }
        for (let i = 0; i < treeList.length; i++) {
            if (treeList[i].dictCode === dictCode) {
                treeList.splice(i, 1);
                break;
            }
            this.removeNodeInTree(treeList[i].children, dictCode);
        }
    }

    // 未关注&关注数量
    getFollowedNumber(data = [], arr = []) {
        for (let item of data) {
            arr.push(item.dictKey);
            if (item.children && item.children.length) this.getFollowedNumber(item.children, arr);
        }
        return arr.filter(Boolean).length;
    }

    // 提交数据格式处理
    private packageTreeData(nodes: any[] = []): any {
        let arr = [];
        let children1 = nodes.filter(item => item.type === '1' && item.dictKey);
        let children2 = nodes.filter(item => item.type === '2' && item.dictKey);
        let children3 = nodes.filter(item => item.type === '3' && item.dictKey);
        if (children1 && children1.length) {
            arr.push({
                type: '1',
                stockInfos: this.backKeyName(children1),
            });
        }
        if (children2 && children2.length) {
            arr.push({
                type: '2',
                stockInfos: this.backKeyName(children2),
            });
        }
        if (children2 && children2.length) {
            arr.push({
                type: '3',
                stockInfos: this.backKeyName(children3),
            });
        }
        return arr;
    }

    // 树形数组格式转换
    translateData(obj = {}) {
        let arr = [];
        let children1 = [];
        let children2 = [];
        let children3 = [];
        obj['children'].map(item => {
            if (item.label === '债券投标') {
                children1.push(...item.children);
            }
            if (item.label === '债券缴款') {
                children2.push(...item.children);
            }
            if (item.label === '债券上市') {
                children3.push(...item.children);
            }
        });
        if (obj['children'].some(i => i.label === '债券投标')) {
            arr.push({
                type: '1',
                stockInfos: this.backKeyName(children1),
            });
        }
        if (obj['children'].some(i => i.label === '债券缴款')) {
            arr.push({
                type: '2',
                stockInfos: this.backKeyName(children2),
            });
        }
        if (obj['children'].some(i => i.label === '债券上市')) {
            arr.push({
                type: '3',
                stockInfos: this.backKeyName(children3),
            });
        }
        return arr;
    }

    private quickFocus(): void {
        if (!(this.filterFocus as any).dictKey) {
            this.$message({ type: 'warning', message: '未选择证券!' });
            return;
        }
        if (this.isFocus) {
            this.$message({ type: 'warning', message: '该证券已关注!' });
            return;
        }

        let obj = {
            type: this.dateType,
            dictCode: this.dateType + '-' + (this.filterFocus as any).dictKey,
            key: this.dateType + '-' + (this.filterFocus as any).dictKey,
            label:
                (this.filterFocus as any).dictKeyName +
                '(' +
                (this.filterFocus as any).dictKey +
                ',' +
                (this.filterFocus as any).param2 +
                '年,' +
                (this.filterFocus as any).param3 +
                '%,' +
                (this.filterFocus as any).param4 +
                '亿)',
            dictKey: (this.filterFocus as any).dictKey,
            dictKeyName: (this.filterFocus as any).dictKeyName,
            existsMarginRate: (this.filterFocus as any).existsMarginRate,
        };
        this.appendNodeInTree(this.bondsInFocus, [obj]);
        this.$nextTick(() => {
            let nodesMap = this.$refs.fedTree.store.nodesMap;
            for (let key in nodesMap) {
                // 全部关闭
                nodesMap[key].expanded = false;
                nodesMap[key].isCurrent = false;
            }

            this.isFocus = true;
            this.expandedListR = ['1', obj.dictCode];
            (this.$refs.fedTree as any).setCurrentKey(obj.dictCode);

            // 设置勾选
            let current = (this.$refs.fedTree as any).getCheckedKeys(obj.dictCode);
            current.push(obj.dictCode);
            (this.$refs.fedTree as any).setCheckedKeys(current);
        });
    }

    // 还原key属性名
    backKeyName(data) {
        let _data = [];
        data.map(value => {
            _data.push({ dictCode: value.dictCode, dictKey: value.dictKey, dictKeyName: value.label, existsMarginRate: value.existsMarginRate });
        });
        return _data;
    }
}
</script>

<style lang="scss" scoped>
.main-content {
    padding: 10px;
}

.follow-operate {
    text-align: center;
    margin-top: 180px;
    button {
        display: inline-block;
        border: 1px solid #e0e6ed;
        border-radius: 4px;
        padding: 5px;
        &:nth-child(2) {
            margin-top: 45px;
            margin-left: 0;
        }
        &:hover {
            background: rgba(37, 137, 245, 0.1);
            cursor: pointer;
        }
    }
}
.followed,
.not-followed {
    border: 1px solid #e0e6ed;
    min-height: 307px;
}
.follow-selected-all {
    height: 35px;
    line-height: 35px;
    background: rgba(37, 137, 245, 0.1);
    padding: 2px 10px;
}
.follow-search {
    padding: 10px 20px;
    background: rgb(239, 243, 255);

    .div-inline {
        display: inline-block;
    }

    .date-type-box {
        margin-left: 5px;
        /deep/ .el-input {
            width: 150px;
        }
    }
}
.follow-tree {
    padding-left: 20px;
    height: 300px;
    overflow-y: scroll;
}
/deep/.el-dialog__body {
    padding: 0;
    max-height: 62vh;
}
.dialog-footer {
    display: flex;
    justify-content: end;
    padding-right: 30px;
}

// /deep/ .el-tree-node__content span {
//     min-width: 12px !important;
// }
</style>
